<template>
  <view class="inviteColleague">
    <!-- 邀请方式 -->
    <view class="invite-type">
      <view class="cell" @click="onClickSms">
        <view class="icon">
          <i-icon icon="iconxiaoxixinxiduanxintixingyoujiantongzhisixinbeifen" size="45rpx" color="#FBD220"></i-icon>
        </view>
        <view class="text-box">
          <text class="title">短信</text>
          <text class="desc">通过手机联系人或手机号发送短信邀请</text>
        </view>
      </view>
      <view class="cell" @click="shareShow = true">
        <view class="icon">
          <i-icon icon="iconweixin1" size="64rpx" color="#46BB36"></i-icon>
        </view>
        <view class="text-box">
          <text class="title">微信</text>
          <text class="desc">邀请微信朋友或群聊朋友</text>
        </view>
      </view>
      <view class="cell btn" :data-clipboard-text="inviteLink" @click="onClickCopyLink">
        <view class="icon">
          <i-icon icon="iconlianjie" size="50rpx" color="#666"></i-icon>
        </view>
        <view class="text-box">
          <text class="title">复制邀请链接</text>
          <text class="desc">复制邀请链接至剪贴板</text>
        </view>
      </view>
    </view>
    
    <!-- 允许员工邀请同事 -->
    <!-- <view class="staff-invite flex flex-ai-c flex-jc-sb">
      <text class="text">允许员工邀请同事</text>
      <u-switch v-model="staffInvite" size="56" active-color="#4CD964"></u-switch>
    </view> -->
    
    <!-- 分享组件 -->
    <share :popup-show="shareShow" :is-download="false" @close="shareShow = false" @change="onChangeShare" />
    
  </view>
</template>

<script>
const Clipboard = require('@/utils/clipboard.js')
import {share} from '@/utils/common-api.js' // 导入分享方法
export default {
  data() {
    return {
      staffInvite: false,
      shareShow: false, // 分享弹窗显示状态
      inviteLink: 'https://files.yzsheng.com/shareH5/Qmc_Client_H5_member/membersPage.html' ,// 邀请链接
      inviteCode: '',
      name: ''
    }
  },
  onLoad(option) {
    this.inviteCode = option.inviteCode || ''
    this.name = option.name || ''
    
    if(option.inviteCode && option.name) {
      this.inviteLink += '?code=' + option.inviteCode + '&name=' + option.name
    } else {
      this.$api.user.GetUserInfomation().then(data => {
        this.inviteLink = '?code=' + data.data.invitecode + '&name=' + data.data.nickname
      }).catch(err => {})
    }
    
    // #ifdef H5
    this.$nextTick(() =>{
      const btnCopy = new Clipboard('.btn')
      btnCopy.on('success', e => {
        uni.showToast({
          icon: 'none',
          title: '链接已复制'
        })
      })
    })
    // #endif
    
  },
  methods: {
    // 点击复制链接
    onClickCopyLink() {
      // #ifndef H5
      uni.setClipboardData({
        data: this.inviteLink,
        success() {
          uni.showToast({
            icon: 'none',
            title: '链接已复制'
          })
        }
      })
      // #endif
    },
    // 点击分享
    onChangeShare(data) {
      share({
        scene: data,
        type: 0,
        href: this.inviteLink,
      }, () => {
        
      })
    },
    // 点击短信
    onClickSms() {
      uni.navigateTo({
        url: `/pages_userModule/mailList/mailList?inviteCode=${this.inviteCode}&name=${this.name}`
      })
    }
  }
}
</script>

<style lang="scss">
page{
  background-color: #f6f6f6;
}
.inviteColleague{
  overflow: hidden;
  .invite-type{
    background-color: #fff;
    box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.14);
    border-radius: 10rpx;
    margin: 30rpx 24rpx;
    .cell{
      display: flex;
      align-items: center;
      .icon{
        height: 100rpx;
        width: 132rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .text-box{
        flex: 1;
        height: 126rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-top: 2rpx solid #f6f6f6;
        .title{
          font-size: 32rpx;
          color: #333;
        }
        .desc{
          font-size: 24rpx;
          color: #999;
          margin-top: 10rpx;
        }
      }
      &:first-child{
        .text-box{
          border-top: none;
        }
      }
    }
  }
  .staff-invite{
    margin: 30rpx 24rpx;
    background-color: #fff;
    height: 98rpx;
    box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.14);
    border-radius: 10rpx;
    padding: 0 24rpx;
    .text{
      display: block;
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
  }
}
</style>
